import { View, Text, Image } from '@tarojs/components'
import { useState } from 'react';
// 头像
import { AtAvatar } from 'taro-ui'
import "taro-ui/dist/style/components/avatar.scss";
// 文字图标
import { AtIcon } from 'taro-ui'
import "taro-ui/dist/style/components/icon.scss";

import './mine.less'
// 路由
import Taro from '@tarojs/taro'
function Mine() {
  // 图片信息
  const [scr, scrtu] = useState('https://img1.baidu.com/it/u=52681052,678098948&fm=253&fmt=auto&app=120&f=JPEG?w=1000&h=400')
  // 微信昵称
  const [user, username] = useState('TC_ZY');
  // 运营文案
  const [yun, yunan] = useState('购物���快~');
  // 订单操作图片和数据
  const order = [
    {
      name: '待付款',
      scr: 'https://img2.baidu.com/it/u=3542803101,6620711&fm=26&fmt=auto&gp=0.jpg'
    },
    {
      name: '待发货',
      scr: 'https://img1.baidu.com/it/u=1977046168,368269341&fm=26&fmt=auto&gp=0.jpg'
    },
    {
      name: '待收货',
      scr: 'https://img0.baidu.com/it/u=2954925222,977582745&fm=26&fmt=auto&gp=0.jpg'
    },
    {
      name: '已完成',
      scr: 'https://img2.baidu.com/it/u=3854887086,4146495681&fm=26&fmt=auto&gp=0.jpg'
    },
  ]
  const my_order = [
    '我的收藏', '我的地址', '联系客服'
  ]
  // 我的收藏跳转
  const W_F_shoucang = () => {
    Taro.navigateTo({
      url: '/pages/mine/myCollection/myCollection'

    })
  }
  // 我的地址跳转
  const W_F_address = () => {
    Taro.navigateTo({
      url: '/pages/mine/myAddress/myAddress'
    })
  }
  // 订单的跳转
  const w_order = () => {
    Taro.navigateTo({
      url: '/pages/orderManage/orderManage'
    })
  }
  // 查看全部订单跳转
  const w_order_quan=(v)=>{
    Taro.navigateTo({
      url: '/pages/orderCheck/orderCheck?name='+v.name
    })
  }
  return (
    <View className="W_box">
      <View className="W_box2">
        <View className="W_dao">
          <Text className="W_my">我的</Text>
        </View>
        <View className="W_username">
          <View className="W_usertoxiang">
            <AtAvatar
              image={scr}
              circle='true'
            ></AtAvatar>
          </View>
          <View>
            <View className="W_mingzi"><Text>{user}</Text></View>
            <View><Text>{yun}</Text></View>
          </View>
        </View>
        <View className="W_order">
          <View className="W_lebiao">
            <Text>商品订单</Text>
            <View className="W_chakanquanbudingdan">
              <Text onClick={w_order}>查看全部</Text>
              <Text className='at-icon at-icon-chevron-right'></Text>
            </View>
          </View>
          <View className="W_xian"></View>
          <View className="W_tupiaoname">
            <View className="W_orderdandu">
              {
                order.map((v, i) => {
                  return (
                    <View onClick={w_order_quan.bind(this,v)} className="W_orderduyi">
                      <Image id="W_imageorder" src={v.scr} />
                      <View className="W-zhuangtai"><Text>{v.name}</Text></View>
                    </View>
                  )
                })
              }
            </View>
          </View>
        </View>
      </View>
      <View className="W_feige"></View>
      <View className="W_box3">
        <View onClick={W_F_shoucang} className="w_mylainjie">
          <Text>我的收藏</Text>
          <Text className='at-icon at-icon-chevron-right w_zititubiao'></Text>
        </View>
        <View onClick={W_F_address} className="w_mylainjie">
          <Text>我的地址</Text>
          <Text className='at-icon at-icon-chevron-right w_zititubiao'></Text>
        </View>
        <View className="w_mylainjie">
          <Text>联系客服</Text>
          <Text className='at-icon at-icon-chevron-right w_zititubiao'></Text>
        </View>
      </View>
    </View>
  )

}

export default Mine;
